<template>

  <div style="padding: 20px">

    <a-row :gutter="12" v-if="connectionList.length>0">

      <a-col :span="6">
        <a-card hoverable style="margin-bottom: 12px">
          <div style="height: 138.22px;width: 100%;cursor: pointer" @click="newConnection">
            <div style="width: 100%;text-align: center;padding-top: 50px">
              <icon-plus size="20"/>
            </div>
            <div style="width: 100%;text-align: center;padding-top: 5px;font-size: 15px">
              新建连接
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6" v-for="(connection,index) in connectionList">
        <a-card hoverable style="margin-bottom: 12px">
          <template #title>
            <a-link @click="linkConnection(connection)">{{ connection.name }}</a-link>
          </template>
          <template #extra>
            <a-dropdown @select="selectConnectionOption" trigger="hover">
              <a-link>
                <icon-more/>
              </a-link>
              <template #content>
                <a-doption :value="{ option: 'edit',connection:connection,index:index }">
                  <icon-edit/>
                  编辑
                </a-doption>
                <a-doption :value="{ option: 'del',connection:connection,index:index }">
                  <icon-delete/>
                  删除
                </a-doption>
              </template>
            </a-dropdown>
          </template>
          <a-descriptions :column="1">
            <a-descriptions-item label="地址">{{ connection.host }}:{{ connection.port }}
            </a-descriptions-item>
            <a-descriptions-item label="用户">{{ connection.username }}</a-descriptions-item>
            <a-descriptions-item label="版本">
              <a-tag v-if="connection.version===''">未知</a-tag>
              <a-tag v-else color="arcoblue">{{ connection.version }}</a-tag>
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
    </a-row>

    <a-result v-else :status="null" title="欢迎使用TD Browser" subtitle="请先创建一个TDengine连接"
              style="margin-top: 100px">
      <template #icon>
        <icon-face-smile-fill style="color: var(--color-neutral-6)"/>
      </template>
      <template #extra>
        <a-space>
          <a-button type="primary" @click="newConnection">
            <template #icon>
              <icon-plus/>
            </template>
            新建连接
          </a-button>
        </a-space>
      </template>
    </a-result>

    <connection-modal ref="connectionModal" @done="connectionDone"></connection-modal>
  </div>
</template>

<script setup lang="ts">

import ConnectionModal from "./modal/ConnectionModal.vue";
import {onMounted, reactive, ref} from "vue";
import type {Connection, QueryResult} from "../../scripts/type";
import {getConnectionList, saveConnectionList} from "../../scripts/store";
import {changeConnection, doQuery} from "../../scripts/mapper";
import {Message, Modal} from '@arco-design/web-vue';
import {useRouter} from "vue-router";

const router = useRouter()
const connectionModal = ref()
let connectionList: Connection[] = reactive([])

onMounted(() => {
  getConnectionList().then((connectList) => {
    if (connectList) {
      for (let item of connectList) {
        connectionList.push(item);
      }
    }
  });
})

const selectConnectionOption = (value) => {
  switch (value.option) {
    case "edit": {
      connectionModal.value.edit(JSON.parse(JSON.stringify(value.connection)), value.index)
      break
    }
    case "del": {
      Modal.warning({
        simple: true,
        hideCancel: false,
        title: '删除连接',
        content: '确定要删除连接' + value.connection.name + '吗?',
        onOk: () => {
          connectionList.splice(value.index, 1);
          saveConnectionList(connectionList)
          Message.success("已删除")
        }
      })
    }
  }
}

const newConnection = () => {
  connectionModal.value.add()
}

const connectionDone = (connection: Connection, connectionIndex) => {
  changeConnection(connection).then((changeSuccess) => {
    if (changeSuccess) {
      doQuery("SELECT SERVER_VERSION();").then((queryResult: QueryResult) => {
        if (queryResult.success && queryResult.data) {
          connection.version = String(queryResult.data[0][0])
          Message.success("连接可用")
        } else {
          connection.version = ""
          Message.error("连接不可用" + (queryResult.message ? (": " + queryResult.message) : ""))
        }
      }).finally(() => {
        if (connectionIndex >= 0) {
          connectionList[connectionIndex] = connection
        } else {
          connectionList.push(connection)
        }
        saveConnectionList(connectionList)
      })
    }
  });
}

const linkConnection = (connection: Connection) => {
  changeConnection(connection).then((changeSuccess) => {
    if (changeSuccess) {
      router.push({path: "/connection/database"})
    }
  })
}

</script>
